<template>
  <div id="page">
    <!-- <span class="username">{{username}}</span> -->
    <div  @mouseenter="editshow('editno')" @mouseleave="edithidden('editno')">
        <div v-if="editno" id="content">
            <p class="username">{{username}}</p>
            <div ref="editno" class="edit" @click="editinput()"><i class="el-icon-edit"></i> 编辑</div>
        </div>
        <div v-else  id="content">
            <div style="display: inline-block;margin-right: 10px;">
            <el-input
            type="text"
            placeholder="请输入内容"
            v-model="editUsername"
            maxlength="6"
            style="width: 200px;"
            show-word-limit
            ></el-input>
            </div>
            <el-button @click="updateUsername()" size="small" type="primary" icon="el-icon-check" circle></el-button>
            <el-button @click="editinput()" size="small" type="info" icon="el-icon-close" circle></el-button>
        </div>
    </div>
    <el-divider></el-divider>
    <!-- 个人简介 -->
    <div  @mouseenter="editshow('editno1')" @mouseleave="edithidden('editno1')">
        <span>个人介绍</span>
        <div v-if="editno1" id="content">
            {{form.user_describe}}
            <div ref="editno1" class="edit" @click="editinput1()"><i class="el-icon-edit"></i> 编辑</div>
        </div>
        <div v-else  id="content">
            <div style="display: inline-block;margin-right: 10px;">
            <el-input
            type="text"
            placeholder="请输入内容"
            v-model="query.user_describe"
            maxlength="35"
            style="width: 600px;"
            show-word-limit
            ></el-input>
            </div>
            <el-button @click="saveinfo()" size="small" type="primary" icon="el-icon-check" circle></el-button>
            <el-button @click="editinput1()" size="small" type="info" icon="el-icon-close" circle></el-button>
        </div>
    </div>
    <el-divider></el-divider>
    <!-- 性别 -->
    <div @mouseenter="editshow('editno2')"  @mouseleave="edithidden('editno2')">
        <span>性别</span>
        <div v-if="editno2" id="content">
            {{form.sex}}
            <div ref="editno2" class="edit" @click="editinput2()"><i class="el-icon-edit"></i> 编辑</div>
        </div>
        <div v-else  id="content">
            <div style="display: inline-block;margin-right: 10px;">
            <el-input
            type="text"
            placeholder="请输入内容"
            v-model="query.sex"
            maxlength="3"
            style="width: 100px;"
            show-word-limit
            ></el-input>
            </div>
            <el-button @click="saveinfo()" size="small" type="primary" icon="el-icon-check" circle></el-button>
            <el-button @click="editinput2()" size="small" type="info" icon="el-icon-close" circle></el-button>
        </div>
    </div>
    <el-divider></el-divider>
    <!-- 出生日期 -->
    <div @mouseenter="editshow('editno3')" @mouseleave="edithidden('editno3')">
        <span>出生日期</span>
        <div v-if="editno3" id="content">
            {{form.birth}}
            <div ref="editno3" class="edit" @click="editinput3()"><i class="el-icon-edit"></i> 编辑</div>
        </div>
        <div v-else  id="content">
            <div style="display: inline-block;margin-right: 10px;">
                <el-date-picker
                v-model="query.birth"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期">
                </el-date-picker>
            </div>
            <el-button @click="saveinfo()" size="small" type="primary" icon="el-icon-check" circle></el-button>
            <el-button @click="editinput3()" size="small" type="info" icon="el-icon-close" circle></el-button>
        </div>
    </div>
    <el-divider></el-divider>
    <!-- 教育背景 -->
    <div @mouseenter="editshow('editno4')" @mouseleave="edithidden('editno4')">
        <span>教育背景</span>
        <div v-if="editno4" id="content">
            {{form.education}}
            <div ref="editno4" class="edit" @click="editinput4()"><i class="el-icon-edit"></i> 编辑</div>
        </div>
        <div v-else  id="content">
            <div style="display: inline-block;margin-right: 10px;">
            <el-input
            type="text"
            placeholder="请输入内容"
            v-model="query.education"
            maxlength="10"
            style="width: 250px;"
            show-word-limit
            ></el-input>
            </div>
            <el-button @click="saveinfo()" size="small" type="primary" icon="el-icon-check" circle></el-button>
            <el-button @click="editinput4()" size="small" type="info" icon="el-icon-close" circle></el-button>
        </div>
    </div>
    <el-divider></el-divider>
    <!-- 居住地 -->
    <div @mouseenter="editshow('editno5')" @mouseleave="edithidden('editno5')">
        <span>居住地</span>
        <div v-if="editno5" id="content">
            {{form.resident}}
            <div ref="editno5" class="edit" @click="editinput5()"><i class="el-icon-edit"></i> 编辑</div>
        </div>
        <div v-else  id="content">
            <div style="display: inline-block;margin-right: 10px;">
            <el-input
            type="text"
            placeholder="请输入内容"
            v-model="query.resident"
            maxlength="20"
            style="width: 400px;"
            show-word-limit
            ></el-input>
            </div>
            <el-button @click="saveinfo()" size="small" type="primary" icon="el-icon-check" circle></el-button>
            <el-button @click="editinput5()" size="small" type="info" icon="el-icon-close" circle></el-button>
        </div>
    </div>
  </div>
</template>
<script>
import {updateinfo,finduserinfo} from '../../api/userinfo'
import {updatename} from '../../api/user'
export default {
  name:"UpdateDetails",
  components:{},
  data: () => {
    return {
        username:localStorage.getItem("name"),
        editUsername: "",
        form: {},
        query: {
            uid: localStorage.getItem("uid"),
            user_describe: "",
            sex: "",
            birth: "",
            education: "",
            resident: "",
        },
        editno: true,
        editno1: true,
        editno2: true,
        editno3: true,
        editno4: true,
        editno5: true,
    }
  },
  mounted() {
    //   获取个人信息
    this.getdata();
  },
  methods: {
      editshow(str) {
        //   判断标签是否存再修改，避免控制台警告
          if(this.$refs[str]) {
              this.$refs[str].style.display="inline-block"
          }
      },
      edithidden(str) {
          if(this.$refs[str]) {
              this.$refs[str].style.display="none"
          }
      },
      updateUsername() {
          let data = {
              name: this.editUsername,
              uid: this.query.uid
          }
          updatename(data).then(res => {
              if (res.code == 200) {
                  localStorage.setItem("name", this.editUsername)
                  this.username = this.editUsername
                  this.editUsername = ""
                  this.editinput()
              }
          })
      },
      saveinfo() {
          updateinfo(this.query)
            .then(res => {
                if (res.code != 200) {
                    this.$message.error(res.mess)
                }
                if (this.editno1 == false) {
                    this.editinput1()
                }
                if (this.editno2 == false) {
                    this.editinput2()
                }
                if (this.editno3 == false) {
                    this.editinput3()
                }
                if (this.editno4 == false) {
                    this.editinput4()
                }
                if (this.editno5 == false) {
                    this.editinput5()
                }
                this.getdata()
            })
      },
      getdata(){
        finduserinfo({
            uid:localStorage.getItem("uid")
        }).then((res)=>{
            console.log(res)
            if(res.code==200){
                this.form=res.data
            }
        })
      },
      editinput() {
          this.editno = !this.editno
          if(this.editno) {
              this.editUsername = ""
          } else {
              this.editUsername = this.username
          }
      },
      editinput1() {
          this.editno1 = !this.editno1
          if(this.editno1) {
              this.query.user_describe = ""
          } else {
              this.query.user_describe = this.form.user_describe
          }
      },
      editinput2() {
          this.editno2 = !this.editno2
          if(this.editno2) {
              this.query.sex = ""
          } else {
              this.query.sex = this.form.sex
          }
      },
      editinput3() {
          this.editno3 = !this.editno3
          if(this.editno3) {
              this.query.birth = ""
          } else {
              this.query.birth = this.form.birth
          }
      },
      editinput4() {
          this.editno4 = !this.editno4
          if(this.editno4) {
              this.query.education = ""
          } else {
              this.query.education = this.form.education
          }
      },
      editinput5() {
          this.editno5 = !this.editno5
          if(this.editno5) {
              this.query.resident = ""
          } else {
              this.query.resident = this.form.resident
          }
      },
      
  }
}
</script>
<style scoped>
#page{
    width: 70%;
    padding: 50px 100px 0px 100px;
    background-color: #ffffff;
    margin: 0 auto;
}
span{
    display: inline-block;
    padding: 15px 0px;
    width: 100px;
    font-size: 20px;
    text-align: right;
    /* font-weight: bold; */
}
.username{
    display: inline-block;
    font-size: 30px;
    font-weight: bold;
}
#content{
    display: inline-block;
    padding-left: 20px;
    width: 750px;
}
.edit{
    padding-left: 10px;
    /* display: inline-block; */
    display: none;
    color: #409eff;
}
.edit2{
    padding-left: 10px;
    display: inline-block;
    color: #409eff;
}
</style>